import React, { Component, PropTypes } from 'react';
import { Link } from 'react-router'
import Module from '../../lib/module'

import { Button, Row, Col, Input, Slider, Table, Breadcrumb } from 'antd';

import {store} from '../../../index';

const Search = Input.Search;

class FixRecord extends Module {
    constructor(props, context) {
        super(props, context);
        this.state = {
            columns:[{
                title: '车辆编号',
                dataIndex: 'number'
            }, {
                title: '维修部位',
                dataIndex: 'repairPart',
            }, {
                title: '维修时间',
                dataIndex: 'repairTime',
            }, {
                title: '本次维修费用',
                dataIndex: 'repairCost',
            }, {
                title: '已维修费用总计',
                dataIndex: 'repairAllCost',
            }],
            data: [{
                key: '1',
                number: '123456',
                repairPart: 'VR主机',
                repairTime: '2018年01月11日',
                repairCost: '¥3000.00',
                repairAllCost: '¥10000.00'
            }, {
                key: '2',
                number: '123456',
                repairPart: 'VR主机',
                repairTime: '2018年01月11日',
                repairCost: '¥3000.00',
                repairAllCost: '¥10000.00'
            }]
        };
    }

    componentDidMount() {
    }

    tableFooter = () => {
        return (
            <div style={{textAlign: 'right'}}>
                今天维修费用总计:
                <span style={{fontSize: '20px', color: '#333', marginLeft: '10px'}}>¥2000.00</span>
            </div>
        )
    }

    render() {
        let { columns, data } = this.state;
        return <div className="N_fix-record">

            <Breadcrumb className="N_Breadcrumb">
                <Breadcrumb.Item>车辆</Breadcrumb.Item>
                <Breadcrumb.Item><Link to="/FixRecord">车辆维修记录</Link></Breadcrumb.Item>
            </Breadcrumb>

            <div className="N_filter-bar">
                <span>归属门店:</span>
                <ul className="mt">
                    <li className="current">滨江店</li>
                    <li>西湖店</li>
                </ul>
            </div>
            <div className="N_filter-bar">
                <span>时间选择:</span>
                <ul className="mt">
                    <ul className="mt">
                        <li className="current">今天</li>
                        <li>本周</li>
                        <li>本月</li>
                        <li>今年</li>
                    </ul>
                </ul>
            </div>
            <Row style={{margin: '30px auto'}}>
                <Col span={12} offset={6}>
                    <Search
                        placeholder="搜索"
                        enterButton="查询"
                        size="large"
                        onSearch={value => console.log(value)}
                    />
                </Col>
            </Row>
            <Table
                columns={columns}
                dataSource={data}
                bordered
                footer={ this.tableFooter }
                style={{margin: '20px'}}
            />
        </div>
    }
}

export default FixRecord;
